// import './App.css';
import Header from "./components/Header";
import Footer from "./components/Footer";
import List from "./components/List";
import React, { Component } from 'react'
import {nanoid} from "nanoid"


export default class App extends Component {
  
  // 初始化状态
  state = {
    todos: [
      { id: "001", name: "吃饭", done: true },
      { id: "002", name: "睡觉", done: true },
      { id: "003", name: "打代码", done: false }
    ]
  }
  // 添加todo
  addTodo=(nameValue)=>{
    console.log(nameValue)
    const {todos}=this.state
    const todoObj={id:nanoid(),name:nameValue,done:false}
    const newTodos=[...todos,todoObj]
    console.log(newTodos)
    this.setState({todos:newTodos})
  }
  // 更新todos
  updateTodo=(id,done)=>{
      console.log(id)
      const {todos}=this.state;
      const newTodos=todos.map(todo=>{
        if(todo.id===id){
          return {...todo,done}
        }else{
          return todo
        }
      })
      this.setState({todos:newTodos})
  }
  // 删除todos
  deleteTodo=(id)=>{
    console.log("del--",id)
    const {todos}=this.state;
    const newTodos=todos.filter((todoObj)=>{
      return todoObj.id!==id
    })
    this.setState({todos:newTodos})
  }
  // 全选功能
  checkAll=(flag)=>{
    console.log("全选状态：",flag)
    const newTodos=this.state.todos.map((todo)=>{return {...todo,done:flag}})
    this.setState({todos:newTodos})
  }
  // 清除所有已完成的任务
  clearAllDone=()=>{
    const {todos}=this.state;
    const newTodos=todos.filter((todoObj)=>{
      return !todoObj.done
    })
    this.setState({todos:newTodos})
  }
  render() {
    // const {todos}=this.state;
    return (
      <div className="App">
        <div className="todo-container">
          <div className="todo-wrap">
            <Header addTodo={this.addTodo}/>
            <List todos={this.state.todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
            <Footer todos={this.state.todos} checkAll={this.checkAll} clearAllDone={this.clearAllDone}/>
          </div>
        </div>
      </div>
    )
  }
}

